<template>
  <div id="mineapp">
    <!-- 导航栏 -->
    <van-nav-bar title="个人中心" :border="false">
      <template #right>
        <van-icon name="scan" color="#000" />
      </template>
    </van-nav-bar>
    <div id="mine">
      <div class="header">
        <!-- 登录头像昵称 -->
        <div class="login-avatar" v-if="show">
          <van-image round :src="str" />
          <span>{{ userList.arr.name }}</span>
        </div>
        <div class="login-avatar" v-else>
          <van-image round :src="imageurl" />
          <span>登录/注册</span>
        </div>
        <!-- 关注优惠卷信息 -->
        <div class="follow-doctor">
          <ul>
            <li v-for="item in doctorlist" :key="item">
              <div class="rectangle"><span></span><span></span></div>
              <span class="title">{{ item }}</span>
            </li>
          </ul>
        </div>
        <!-- 会员开通 -->
        <div class="member-activation" @click="handleclick">
          <img src="@/assets/images/mine5_slices/banner@2x.png" alt="" />
        </div>
      </div>
      <div class="mall-order">
        <div class="order-header">
          <!-- 商城订单 -->
          <span class="order">商城订单</span>
          <div class="allorder-d">
            <span class="allorder">全部订单</span>
            <van-icon name="arrow" size="14" />
          </div>
        </div>
        <van-grid :border="false">
          <van-grid-item
            icon-size="21"
            :icon="value.url"
            :text="value.title"
            v-for="value in orderlist"
            :key="value"
          />
        </van-grid>
      </div>
      <!-- 服务订单 -->
      <div class="service-order">
        <div class="service-header">
          <span class="order">服务订单</span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="value in servicelist" :key="value">
            <van-icon :name="value.url" />
            <p class="service-p">{{ value.title }}</p>
            <p class="service-o">{{ value.titleo }}</p>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 更多推荐 -->
      <div class="nomination">
        <div class="order-header">
          <span class="order">更多推荐</span>
        </div>
        <van-grid :border="false">
          <van-grid-item
            icon-size="21"
            :icon="value.url"
            :text="value.title"
            v-for="(value, index) in morelist"
            :key="index"
            @click="more(value)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import { getUserInfoApi } from "../../utils/api";
export default {
  setup() {
    const imageurl = ref(require("@/assets/images/mine5_slices/touxiang.png"));
    const doctorlist = reactive(["关注医生", "优惠卷", "云币"]);
    const orderlist = reactive([
      {
        url: require("@/assets/images/mine5_slices/Waitingclause.png"),
        title: "待付款",
      },
      {
        url: require("@/assets/images/mine5_slices/Waitinggoods.png"),
        title: "待发货",
      },
      {
        url: require("@/assets/images/mine5_slices/Collectedgoods.png"),
        title: "待收货",
      },
      {
        url: require("@/assets/images/mine5_slices/Alreadycompleted.png"),
        title: "已完成",
      },
    ]);
    const servicelist = reactive([
      {
        url: require("@/assets/images/mine5_slices/Question.png"),
        title: "问诊记录",
        titleo: "我的问诊订单",
      },
      {
        url: require("@/assets/images/mine5_slices/Processingmethod.png"),
        title: "我的处方",
        titleo: "我的处方列表",
      },
      {
        url: require("@/assets/images/mine5_slices/Myservice.png"),
        title: "我的服务",
        titleo: "我的服务订单",
      },
    ]);
    const morelist = reactive([
      {
        url: require("@/assets/images/mine5_slices/健康档案@2x.png"),
        title: "健康档案",
      },
      {
        url: require("@/assets/images/mine5_slices/就诊人管理@2x.png"),
        title: "就诊人管理",
      },
      {
        url: require("@/assets/images/mine5_slices/企业会员@2x.png"),
        title: "企业会员",
        path: "/corporateMem",
      },
      {
        url: require("@/assets/images/mine5_slices/兑换会员@2x.png"),
        title: "兑换会员",
      },
      {
        url: require("@/assets/images/mine5_slices/客服中心@2x.png"),
        title: "客服中心",
      },
      {
        url: require("@/assets/images/mine5_slices/专家服务@2x.png"),
        title: "专家服务",
      },
      {
        url: require("@/assets/images/mine5_slices/设置@2x.png"),
        title: "设置",
        path: "/setup",
      },
    ]);
    const router = useRouter();
    const handleclick = () => {
      router.push({
        path: "/home/Member",
      });
    };
    const more = (value) => {
      if (sessionStorage.getItem("token")) {
        router.push({
          path: value.path,
        });
      } else {
        router.replace("/login");
      }
    };
    onMounted(() => {
      // window.addEventListener("scroll", show);
      getuserinfoList();
    });
    let show = false;
    if (sessionStorage.getItem("token")) {
      show = true;
    }
    //获取个人信息接口
    const str = ref("");
    const perfix = "http://47.98.235.98:3000";
    let userList = reactive({ arr: [] });
    const getuserinfoList = async () => {
      const res = await getUserInfoApi({
        token: sessionStorage.getItem("token"),
      });
      userList.arr = res.result[0];
      str.value = perfix + userList.arr.imgUrl;
    };
    return {
      imageurl,
      doctorlist,
      orderlist,
      servicelist,
      morelist,
      router,
      handleclick,
      more,
      getuserinfoList,
      show,
      userList,
      perfix,
      str,
    };
  },
};
</script>
<style lang="less">
// 导航栏
#mineapp {
  .van-nav-bar {
    background: #f4f7f9;
    .van-nav-bar__title {
      color: #999999;
      font-size: 18px;
    }
    .van-nav-bar__right {
      .van-icon {
        font-size: 29px;
      }
    }
  }
  #mine {
    width: 100%;
    padding: 0 15px;
    background: rgb(244, 247, 249);
    padding-bottom: 15px;
    .header {
      background: rgb(244, 247, 249);
      //登录头像昵称
      .login-avatar {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        .van-image {
          img {
            width: 50px;
            height: 50px;
          }
        }
        span {
          margin-left: 10px;
          width: 100px;
          height: 18px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
      }
      //关注优惠卷信息
      .follow-doctor {
        width: 100%;
        height: 76px;
        ul {
          padding: 15px 0;
          display: flex;
          justify-content: space-around;
          li {
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .rectangle {
              width: 100%;
              height: 6px;
              display: flex;
              justify-content: center;
              span {
                width: 8px;
                height: 3px;
                background: #000000;
                border-radius: 3px;
              }
            }
            .title {
              width: 65px;
              height: 23px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
              text-align: center;
              line-height: 23px;
            }
          }
        }
      }
      // 会员开通
      .member-activation {
        width: 100%;
        height: 67px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 商城订单
    .mall-order {
      width: 100%;
      height: 130px;
      margin-top: 15px;
      background: #ffffff;
      border-radius: 10px;
      .order-header {
        padding: 0 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .order {
          width: 70px;
          line-height: 36px;
          height: 36px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
        .allorder-d {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          .allorder {
            height: 12px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #999999;
          }
        }
      }
    }
    //服务订单
    .service-order {
      width: 100%;
      height: 130px;
      margin-top: 15px;
      background: #ffffff;
      border-radius: 10px;
      .service-header {
        padding: 0 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .order {
          width: 70px;
          line-height: 36px;
          height: 36px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
      }
      .van-grid {
        .van-icon__image {
          width: 41px;
          height: 41px;
        }
        .service-p {
          width: 100%;
          height: 16px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          line-height: 20px;
          text-align: center;
        }
        .service-o {
          width: 100%;
          height: 13px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #999999;
          line-height: 20px;
          text-align: center;
        }
      }
    }
    // 更多推荐
    .nomination {
      width: 100%;
      margin-top: 15px;
      background: #ffffff;
      border-radius: 10px;
      .order-header {
        padding: 0 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .order {
          width: 70px;
          line-height: 36px;
          height: 36px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
        .allorder {
          width: 47px;
          height: 12px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #999999;
        }
      }
    }
  }
}
</style>
